<!-- 模块说明 -->
<template>
  <div>
    <el-form :model="form" label-width="120px" style="margin-top: 30px">
      <el-form-item label="年级">
        <el-select v-model="form.class">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.grade"
            :value="item.grade"
            @click="getId(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学科">
        <el-select v-model="form.subjectId">
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.name"
            @click="gettId(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题干">
        <el-input v-model="form.shortTitle" style="width: 800px" />
      </el-form-item>
      <el-form-item label="选项">
       <div>true：<el-input v-model="form.topicResource1" style="width: 800px" /></div>
       <br/><br/><br/>
        <div>false：<el-input v-model="form.topicResource2" style="width: 800px" /></div>
      </el-form-item>
      <el-form-item label="标答">
      <el-radio-group v-model="form.correct">
        <el-radio label="true" />
        <el-radio label="false" />
      </el-radio-group>
    </el-form-item>
      <el-form-item label="分数">
        <el-input-number v-model="form.score" :min="1" :max="30" />
      </el-form-item>
      <el-form-item label="难度">
        <el-input-number v-model="form.difficult" :min="1" :max="5" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="click(form)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// import {ref,onMounted,reactive} from 'vue'
interface IProps {
  options: any[];
  options2: any[];
  getId: any;
  gettId: any;
  submitList: any;
}
const { options, options2, getId, gettId, submitList } = defineProps<IProps>();

import { reactive } from "vue";

// do not use same name with ref
const form = reactive(
  submitList ? {
    shortTitle: submitList.shortTitle,
    correct: submitList.correct,
    subjectId: '',
    topicResource1: submitList.topicResource1,
    topicResource2: submitList.topicResource2,
    class: submitList.class,
    score: submitList.score,
    difficult: submitList.difficult,
  } : {
    shortTitle: "",
    correct: "",
    subjectId: "",
    class: "",
    topicResource1: '',
    topicResource2: '',
    score: 1,
    difficult: 1,
  }
);
const emit = defineEmits(["onSumbit"]);
const click = (form: any) => {
  emit("onSumbit", form);
};
</script>
<style lang="scss" scoped></style>
